<template>
  <div>
    <Row :gutter="20">
      <i-col :md="24" :lg="8" style="margin-bottom: 20px">
        <Card shadow style="height: 235px; width: 400px">
          <p style="font-size: 18px; font-weight: 600"></p>
          <div class="user-info">
            <img src="../img/2.jpg" class="user-avator" alt />
            <div class="user-info-cont">
              <div class="user-info-name">BOSS</div>
              <div>集团总裁</div>
            </div>
          </div>
          <div class="user-info-list">
            上次登录时间：
            <span>2022-2-22</span>
          </div>
          <div class="user-info-list">
            上次登录地点：
            <span>浙江杭州</span>
          </div>
        </Card>
      </i-col>
      <div
        v-for="(infor, i) in inforCardData"
        :key="`infor-${i}`"
        style="
          height: 120px;
          width: 250px;
          padding-bottom: 10px;
          display: inline-block;
          margin: 5px;
          margin-left: 15px;
        "
      >
        <infor-card
          shadow
          :color="infor.color"
          :icon="infor.icon"
          :icon-size="50"
          style="height: 100px"
        >
          <div @click="skipTo(infor.path)">
            <count-to :end="infor.count" count-class="count-style" />
            <p class="text">{{ infor.title }}</p>
          </div>
        </infor-card>
      </div>
    </Row>
    <Row :gutter="20" >
      <i-col :md="24" :lg="8" style="margin-bottom: 20px">
        <Card shadow style="height: 400px">
          <p style="font-size: 18px; font-weight: 600">车辆运行情况</p>
          <Divider />
          <p class="car_word">当前在外车辆：</p>
           <count-to :end="300" count-class="count-style" style="text-align:center; color:#498ef3"/>
          <p class="car_word">当前在公司车辆：</p>
          <count-to :end="36" count-class="count-style" style="text-align:center; color:#498ef3"/>
          <p class="car_word">当前运输车辆：</p>
          <count-to :end="128" count-class="count-style" style="text-align:center; color:#498ef3"/>
        </Card>
      </i-col>
      <i-col :md="24" :lg="16" style="margin-bottom: 20px">
        <Card shadow style="height: 400px">
          <chart-bar style="height: 350px;" :value="barData" text="本周员工驾驶数"/>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
import InforCard from "_c/info-card";
import CountTo from "_c/count-to";
import { ChartPie, ChartBar } from "_c/charts";
import Example from "./example.vue";
import Chart from "./chart.vue"

export default {
  name: "home",
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
    Example,
    Chart,
  },
  data() {
    return {
      imgList: [
        {
          src: require("../img/1.png"),
        },
      ],
      inforCardData: [
        {
          title: "车辆绑定申请",
          icon: "md-person-add",
          count: 23,
          color: "#2d8cf0",
          path: "/motorcade_information/drive_car",
        },
        {
          title: "新增违规记录",
          icon: "md-locate",
          count: 132,
          color: "#19be6b",
          path: "/drive_data/violate_record",
        },
        {
          title: "待处理申诉数",
          icon: "md-help-circle",
          count: 42,
          color: "#ff9900",
          path: "/complaint_component/complaint_component",
        },
        {
          title: "异常健康信息",
          icon: "md-share",
          count: 57,
          color: "#ed3f14",
          path: "/drive_data/drive_health",
        },
        {
          title: "待处理图片数",
          icon: "md-chatbubbles",
          count: 122,
          color: "#E46CBB",
          path: "/model_training/image_annotation",
        },
        {
          title: "新增行程记录",
          icon: "md-map",
          count: 214,
          color: "#9A66E4",
          path: "/drive_data/journey_record",
        },
      ],
      pieData: [
        { value: 335, name: "直接访问" },
        { value: 310, name: "邮件营销" },
        { value: 234, name: "联盟广告" },
        { value: 135, name: "视频广告" },
        { value: 1548, name: "搜索引擎" },
      ],
      barData: {
        Mon: 23253,
        Tue: 24235,
        Wed: 26321,
        Thu: 22340,
        Fri: 24643,
        Sat: 31322,
        Sun: 27324,
      },
    };
  },
  methods: {
    skipTo(toPath) {
      this.$router.push({ path: toPath });
    },
  },
  mounted() {
    //
  },
};
</script>

<style lang="less">
.count-style {
  font-size: 40px;
  font-weight: 600;
}
Col Card {
  margin-left: 50px;
}
.quick Row {
  margin: 20px;
}
.text {
  // font-weight: 600;
  color: #999;
}
.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
  margin-left: 70px;
}
.car_word{
  font-size:18px ;
  font-weight: 600;

}
</style>
